<template>
  <div class="my-orders">
    <van-cell title="我的订单" value="查看全部订单"
              title-class="my-orders-cell-title" value-class="my-orders-cell-value"
              center clickable :border="false" to="/orders">
      <template #right-icon>
        <van-icon class="van-cell__right-icon" name="arrow" :size="13"/>
      </template>
    </van-cell>
    <van-tabbar :fixed="false" active-color="#7d7e80" class="my-orders-tabbar">
      <van-tabbar-item :to="awaitingPaymentUrl" :badge="awaitingPaymentCount ? awaitingPaymentCount : ''">
        <template #default>待付款</template>
        <template #icon>
          <van-icon name="pending-payment" :size="22"/>
        </template>
      </van-tabbar-item>
      <van-tabbar-item :to="awaitingFulfillment" :badge="awaitingFulfillmentCount ? awaitingFulfillmentCount : ''">
        <template #default>待发货</template>
        <template #icon>
          <van-icon name="send-gift-o" :size="22"/>
        </template>
      </van-tabbar-item>
      <van-tabbar-item :to="awaitingPickup" :badge="awaitingPickupCount ? awaitingPickupCount : ''">
        <template #default>待收货</template>
        <template #icon>
          <van-icon name="logistics" :size="22"/>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/orders/reviews" :badge="awaitingReviewCount ? awaitingReviewCount : ''">
        <template #default>评价</template>
        <template #icon>
          <van-icon name="comment-o" :size="22"/>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/disputes" :badge="refundingCount ? refundingCount : ''">
        <template #default>退款/售后</template>
        <template #icon>
          <van-icon name="after-sale" :size="22"/>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import * as _ from "lodash"
import { Cell, Icon, Tabbar, TabbarItem } from "vant"
import { order, security } from "@mall/api-services"
import {
  awaitingFulfillmentStatuses,
  awaitingPaymentStatuses,
  awaitingPickupStatuses,
  awaitingRefundStatuses,
  awaitingReviewStatuses,
  completedStatuses,
} from "@/utils/order"

export default {
  name: "MyOrders",
  components: {
    [Cell.name]: Cell,
    [Icon.name]: Icon,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
  computed: {
    awaitingPaymentUrl() {
      return this.statusesRouteLocation(awaitingPaymentStatuses)
    },
    awaitingFulfillment() {
      return this.statusesRouteLocation(awaitingFulfillmentStatuses)
    },
    awaitingPickup() {
      return this.statusesRouteLocation(awaitingPickupStatuses)
    },
  },
  data() {
    return {
      awaitingPaymentCount: 0,
      awaitingFulfillmentCount: 0,
      awaitingPickupCount: 0,
      awaitingReviewCount: 0,
      refundingCount: 0,
    }
  },
  created() {
    this.refreshCount()
  },
  methods: {
    statusesRouteLocation(statuses) {
      return {
        path: `/orders`,
        query: {
          statuses: _.join(statuses, ","),
        },
      }
    },
    countStatuses(statuses) {
      const customerId = security.SecurityUserHolder.getUserId()
      return new Promise((resolve, reject) => {
        order.OrderServiceV1.createOrderQuery()
            .customerId(customerId).statuses(statuses)
            .count().then(resolve).catch(reject)
      })
    },
    countRefundingStatuses(statuses) {
      const customerId = security.SecurityUserHolder.getUserId()
      return new Promise((resolve, reject) => {
        order.OrderDisputeServiceV1.createOrderDisputeQuery()
            .customerId(customerId)
            .statuses(statuses)
            .count().then(resolve).catch(reject)
      })
    },
    countAwaitingReviewStatuses(statuses) {
      const customerId = security.SecurityUserHolder.getUserId()
      return new Promise((resolve, reject) => {
        order.OrderServiceV1.createOrderQuery()
            .customerId(customerId)
            .statuses(statuses)
            .reviewStatuses(awaitingReviewStatuses)
            .count()
            .then(resolve).catch(reject)
      })
    },
    refreshCount() {
      this.countStatuses(awaitingPaymentStatuses).then(count => this.awaitingPaymentCount = count)
      this.countStatuses(awaitingFulfillmentStatuses).then(count => this.awaitingFulfillmentCount = count)
      this.countStatuses(awaitingPickupStatuses).then(count => this.awaitingPickupCount = count)
      this.countAwaitingReviewStatuses(completedStatuses).then(count => this.awaitingReviewCount = count)
      this.countRefundingStatuses(awaitingRefundStatuses).then(count => this.refundingCount = count)
    },
  },
}
</script>

<style lang="scss" scoped>
.my-orders {
  .my-orders-cell-title {
    font-weight: 700;
    font-size: 16px;
  }

  .my-orders-cell-value {
    font-size: 13px;
  }

  .my-orders-tabbar {
    padding: 9px 0;
  }
}
</style>
